<template>
	<view class="pb-4 bg-cF6F7FB min-vh-100" style="padding-top: 24rpx;">
		<catalogue></catalogue>
		<view class="share" v-if="savedblogs.length">
			<view class="w-100 " :class="i?'py-3':''" style="padding: 0 12px;" v-for="v,i in savedblogs" :key="i">
				<view class="position-relative " style="height: 400rpx;"
					:style="{'background-image': `url(${v.coverimage})`}" @tap="jumpBlogDetail(v)">
					<image v-if="v.blogtype=='视频'" class="puase position-absolute" src="../../static/website/play.svg" mode=""></image>
					<view class="position-absolute  w-100" style="bottom: 0px;">
						<view style="background: rgba(54, 54, 54, 0.85);">
							<view style="margin: 0 60rpx;">
								<view class="d-flex num  justify-content-between  text-cfff">
									<view class="d-flex align-items-center">
										<image src="../../static/website/view.svg" mode=""></image>
										<text class="blog_num">{{v.viewcount}}</text>
									</view>
									<view class="d-flex align-items-center" @click.stop="toggleLikeblog_throttle(v)">
										<image :src="vuex_likeblog.includes(v.id) ? '../../static/website/collect.svg' : '../../static/website/collect-no.svg'" mode=""></image>
										<text class="blog_num">{{v.likecount}}</text>
									</view>
									<view class="d-flex align-items-center" @click.stop="toggleSaveblog_throttle(v)">
										<image :src="vuex_saveblog.includes(v.id) ? '../../static/website/star-fill.svg' : '../../static/website/star.svg'" mode=""></image>
										<text class="blog_num">{{v.savecount}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
		
				<view @tap="jumpBlogDetail(v)">
					<view class="title d-flex align-items-center w-100 ">
						<view class="tag ">
							{{v.blogtype}}
						</view>
						<view class="text" style="	overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;flex: 1;">
							{{v.name}}
						</view>
					</view>
					<view class="author d-flex align-items-center w-100 ">
						<view class="time">
							{{$u.timeFormat(v.createtime, 'mm/dd/yyyy')}}
						</view>
						<view class="text">
							by {{v.author}}
						</view>
					</view>
					<view class="abstract">
						摘要：{{v.summary}}
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex  align-items-center flex-column w-100 h-100 py-5" v-else>
			<view class="" style="width: 320rpx;height: 320rpx;">
				<image src="../../static/website/empty.png" class="w-100 h-100" mode=""></image>
			</view>
			<view class="text-16px" style="color: #CDD9ED;">暂无收藏文章视频</view>
		</view>
	</view>
</template>

<script>
	import {
		http_getMySavedBlog,
	} from '@/common/api.js';
	export default {
		data() {
			return {
				savedblogs: []
			}
		},
		onLoad() {
			uni.hideShareMenu()
			http_getMySavedBlog()
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.savedblogs = res.data.savedblogs
					}
				})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.blog_num {
		font-size: 24rpx;
		color: #F2F2F2;
		padding-left: 8rpx;
	}
.share{
		padding-top: 48rpx;
		padding-bottom: 48rpx;
		background: #F6F7FB;
		.title{
			font-size: 40rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			line-height: 56rpx;
			text{
				color: #40C6A1;
			}
		}
		&-en{
			font-size: 28rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #C0C4CC;
			line-height: 40rpx;
			text-align: center;
			padding-bottom: 46rpx;
		}
		.puase{
			width: 144rpx;
			height: 144rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.num{
			padding: 18rpx 0;
			bottom: 0;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.title{
			padding-top: 19px;
			.tag{
				font-size: 28rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
				line-height: 40rpx;
				background: #2367D7;
				border-radius: 1px;
				border: 1px solid #2367D7;
				padding: 1px;
			}
			.text{
				padding-left: 10px;
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #303133;
				line-height: 50rpx;
			}
		}
		.author{
			padding: 10px 0;
			.time{
				font-size: 32rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #40C6A1;
				line-height: 22px;
			}
			.text{
				font-size: 32rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #909193;
				line-height: 22px;
				padding-left: 32rpx;
			}
		}
		.abstract{
			font-size: 32rpx;
			color: #606266;
			line-height: 52rpx;
			-webkit-line-clamp: 3; //设置几行
			display: -webkit-box;  //设置为伸缩盒弹性盒子展示
			overflow: hidden; //超出隐藏
			text-overflow: ellipsis; //设置超出部分以省略号展示
			-webkit-box-orient: vertical; //伸缩盒弹性盒子的排列方式
		}
		.more{
			.title{
				padding: 28rpx 0 32rpx ;
				.text{
				font-size: 40rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #40C6A1;
				line-height: 56rpx;
				}
			}
			image{
				width: 52rpx;
				height: 52rpx;
			}
		}
	}
	.line{
		height: .5px;
		flex: 1;
		background: red;
		background: #909193;
	}
</style>
